<template>
  <div class="page-wrap">
    <dv-loading v-if="loading">Loading...</dv-loading>
    <div v-else class="page-body">
      <!-- 左侧列 -->
      <div class="column">
        <dv-border-box-12></dv-border-box-12>
      </div>
      <!-- 中间列 -->
      <div class="column">
        <section class="map">
          <dv-border-box-12>
            <bai-map></bai-map>
          </dv-border-box-12>
        </section>
        <section class="table">
          <dv-border-box-12>
            <div class="section-header">
              <img src="../../assets/images/headers/table.png" alt />
              <h6>滚动表格数据</h6>
            </div>
            <div class="section-content">
              <dv-scroll-board :config="tableData" style="width:100%;height:330px" />
            </div>
          </dv-border-box-12>
        </section>
      </div>
      <!-- 右侧列 -->
      <div class="column">
        <section class="weather">
          <dv-border-box-12>
            <div class="section-header">
              <img src="../../assets/images/headers/pie.png" alt />
              <h6>前端框架使用占比</h6>
            </div>
            <div class="section-content">
              <dv-active-ring-chart :config="ringData" style="width:200px;height:200px" />
            </div>
          </dv-border-box-12>
        </section>
        <section class="board">
          <dv-border-box-12></dv-border-box-12>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
import BaiMap from "@/components/BaiMap";
export default {
  name: "monitor",
  components: { BaiMap },
  data() {
    return {
      loading: true,
      tableData: {
        headerHeight: 50,
        rowNum: 7, //表格行数
        headerBGC: "#0f1325", //表头
        oddRowBGC: "#0f1325", //奇数行
        evenRowBGC: "#171c33", //偶数行
        index: true,
        columnWidth: [50],
        align: ["center"],
        header: ["列1", "列2", "列3"],
        data: [
          ["行1列1", "行1列2", "行1列3"],
          ["行2列1", "行2列2", "行2列3"],
          ["行3列1", "行3列2", "行3列3"],
          ["行4列1", "行4列2", "行4列3"],
          ["行5列1", "行5列2", "行5列3"],
          ["行6列1", "行6列2", "行6列3"],
          ["行7列1", "行7列2", "行7列3"],
          ["行8列1", "行8列2", "行8列3"],
          ["行9列1", "行9列2", "行9列3"],
          ["行10列1", "行10列2", "行10列3"],
        ],
      },
      ringData: {
        radius: "62%",
        activeRadius: "70%",
        digitalFlopStyle: {
          fontSize: 20,
        },
        data: [
          {
            name: "Vue",
            value: 150,
          },
          {
            name: "React",
            value: 100,
          },
          {
            name: "Angular",
            value: 78,
          },
          {
            name: "JQuery",
            value: 66,
          },
          {
            name: "ES6",
            value: 80,
          },
        ],
      },
    };
  },
  mounted() {
    this.cancelLoading();
  },
  methods: {
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
.page-body {
  height: 100%;
  display: grid;
  grid-template-columns: 3fr 5fr 3fr;
}

.map {
  height: 55%;
}
.table {
  height: 45%;
}

.weather {
  height: 30%;
}

.board {
  height: 70%;
}

section .section-header {
  display: flex;
  align-items: center;
  margin: 5px 0 15px;
  img {
    width: 30px;
  }
  h6 {
    margin: 0;
    font-size: 18px;
    padding-left: 10px;
  }
}
section .section-content {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
